<!-- 播放器的整体结构 -->
<template>
  <div class="player-wrap">
    <!-- 小播放器组件 -->
    <mini-player v-show="!fullScreen" :progress="progress" @popupBottom="popupBottom" />
    <!-- 全屏播放器组件 -->
    <normal-palyer  v-show="fullScreen" :progress="progress" :currentTime="currentTime" :duration="duration" @popupBottom="popupBottom" @changeProgressValue="changeProgressValue" @changeProgress="changeProgressPlay" />
    <!-- 音乐播放列表组件 -->
    <van-popup v-model="show" closeable position="bottom" :style="{ height: '70%' }">
      <song-list-page :data="playList" />
    </van-popup>
    <audio ref="audio" :loop="playLoop" :src="`https://music.163.com/song/media/outer/url?id=${currentSongId}.mp3`" />
  </div>
</template>

<script>
import NormalPalyer from './NormalPlayer'// 全屏播放器组件
import MiniPlayer from './MiniPlayer'// 小屏播放器组件
import SongListPage from '../../components/SongListPage'// 音乐播放列表组件
import { mapGetters, mapState } from 'vuex'
export default {
  components: {
    NormalPalyer, // 全屏播放器组件
    MiniPlayer, // 小屏播放器组件
    SongListPage// 音乐播放列表组件
  },
  data () {
    return {
      // audio当前的时间
      currentTime: 0,
      // audio的总时长
      duration: 0,
      // 音乐是循环播放
      loop: false,
      // 控制音乐进度条动作
      flag: false,
      // 控制播放列表显示隐藏
      show: false
    }
  },
  methods: {
    // 拖动滑块控制音乐播放进度
    changeProgressPlay (newValue) {
      this.currentTime = newValue * this.duration / 100
    },
    // 拖动进度条
    changeProgressValue (newValue) {
      // 控制音乐进度条动作开始
      if (newValue === 'start') {
        this.flag = true
        // 控制音乐进度条动作结束
      } else if (newValue === 'end') {
        this.flag = false
        this.audio.currentTime = this.currentTime
      }
    },
    // 控制播放列表显示隐藏
    popupBottom (Value) {
      this.show = Value
    }
  },
  computed: {
    // 从仓库中获得仓库的计算属性，转为组件的计算属性
    ...mapGetters({
      currentSong: 'player/currentSong'
    }),
    // 从仓库中获得仓库的state，转为组件的计算属性
    ...mapState({
      // 播放状态
      playing: (state) => state.player.playing,
      // 播放列表
      playList: (state) => state.player.playList,
      // 是否全屏播放
      fullScreen: (state) => state.player.fullScreen,
      // 播放模式
      playMode: (state) => state.player.mode
    }),
    // 计算歌曲id
    currentSongId () {
      return this.currentSong.id
    },
    // 进度的百分比
    progress () {
      const result = this.currentTime / this.duration
      return (isNaN(result) ? 0 : result) * 100
    },
    // 循环播放
    playLoop () {
      return this.playMode === 1
    }
  },
  watch: {
    // 监听播放状态，操作audio标签播放或暂停歌曲
    playing (newVal) {
      // 等待dom渲染好之后，在操作
      this.$nextTick(() => {
        // console.log(this.audio.src);
        if (newVal) {
          // 播放音乐
          this.audio.play()
        } else {
          // 暂停音乐
          this.audio.pause()
        }
      })
    },
    // 监听歌曲id，id变了，要重新加载歌曲，重新播放歌曲
    currentSongId (newvalue, oldValue) {
      if (!oldValue) {
        return
      }
      // 有上一首歌才重载歌曲
      this.$nextTick(() => {
        this.audio.load()
        this.audio.play()
      })
    }
  },
  mounted () {
    // 组件挂载好了，dom首次渲染完毕了，获得audio标签，设置在this上，方便之后访问
    this.audio = this.$refs.audio
    this.audio.addEventListener('canplay', () => {
      // audio可以播放时，获得音乐的时长
      this.audio.play()
      this.duration = this.audio.duration
    })
    // audio播放过程中时间的更新事件
    this.audio.addEventListener('timeupdate', () => {
      // 控制音乐进度条动作结束时更新播放时间
      if (this.flag) {
        return
      }
      this.currentTime = this.audio.currentTime
    })
    // 音乐播放结束
    this.audio.addEventListener('ended', () => {
      // 播放下一首
      if (this.playMode === 1) {
        return false
      }
      this.$store.commit({
        type: 'player/switchPlayMusic',
        switchMUsic: 'next'
      })
    })
  }
}
</script>

<style>
</style>
